<template>
	<view class="audit-inner">
		<!-- <block v-if="!shopCertData">
			<view class="audit-status">
				<text class="color-base-text font-size-toolbar">商户未认证</text>			
				<view class="color-sub">商户暂未提交请资料认证</view>
			</view>
			<button class="audit-btn color-base-bg" type="default" @click="toOpenInfo">提交资料</button>
		</block> -->
		<!-- <block v-if="shopCertData"> -->
		<block>
			<view class="audit-status">
				<text class="color-base-text font-size-toolbar">{{auditInfo['procedure_'+procedure].title}}</text>
				<view v-if="procedure == 3" class="">
					<view class="" v-if="shopCertData.sxp_wxapplycode || shopCertData.sxp_wxapplyinfo">
						<view class="realname-tit">
							微信实名信息
						</view>
						<view v-if="shopCertData.sxp_wxapplycode" class="qrcode"
							@click="previewImg(shopCertData.sxp_wxapplycode)">
							<image :src="$util.img(shopCertData.sxp_wxapplycode)" mode="aspectFit"></image>
						</view>
						<view v-if="shopCertData.sxp_wxapplyinfo" class="color-warn">{{shopCertData.sxp_wxapplyinfo}}
						</view>
					</view>
					<view class="" v-if="shopCertData.sxp_zfbapplycode || shopCertData.sxp_zfbapplycode">
						<view class="realname-tit">
							支付宝实名信息
						</view>
						<view v-if="shopCertData.sxp_zfbapplycode" class="qrcode"
							@click="previewImg(shopCertData.sxp_zfbapplycode)">
							<image :src="$util.img(shopCertData.sxp_zfbapplycode)" mode="aspectFit"></image>
						</view>
						<view v-if="shopCertData.sxp_zfbapplyinfo" class="color-warn">{{shopCertData.sxp_zfbapplyinfo}}
						</view>
					</view>
				</view>
				<view v-else class="color-sub">{{auditInfo['procedure_'+procedure].text}}<text class="color-base-text"
						@click="getApplyMessage">{{auditInfo['procedure_'+procedure].error}}</text></view>
			</view>

			<view class="audit-wrap" v-if="shopCertData.cert_type == 2 || shopCertData.cert_type == 3">
				<text class="audit-title">公司信息</text>
				<view class="audit-item">
					<text>营业执照电子版</text>
					<view class="img-wrap" @click="previewImg(shopCertData.business_licence_number_electronic)">
						<image :src="$util.img(shopCertData.business_licence_number_electronic)" mode="aspectFit">
						</image>
					</view>
				</view>
				<view class="audit-item">
					<text>公司名称</text>
					<text>{{shopCertData.company_name}}</text>
				</view>
				<view class="audit-item">
					<text>统一社会信用码</text>
					<text>{{shopCertData.business_licence_number}}</text>
				</view>
				<view class="audit-item">
					<text>营业执照有效期</text>
					<text>{{shopCertData.business_licence_number_start_date}}至{{shopCertData.business_licence_number_end_date}}</text>
				</view>
				<view class="audit-item">
					<text>经营地址</text>
					<text>{{shopCertData.company_full_address}}</text>
				</view>
				<view class="audit-item">
					<text>法人姓名</text>
					<text>{{shopCertData.contacts_name}}</text>
				</view>
				<view class="audit-item">
					<text>法人手机</text>
					<text>{{shopCertData.contacts_mobile}}</text>
				</view>
				<view class="audit-item">
					<text>法人身份证</text>
					<text>{{shopCertData.contacts_card_no}}</text>
				</view>
				<view class="audit-item">
					<text>法人身份证有效期</text>
					<text>{{shopCertData.contacts_card_start_date}}至{{shopCertData.contacts_card_end_date}}</text>
				</view>
				<view class="audit-item">
					<text>法人身份证正面</text>
					<view class="img-wrap" @click="previewImg(shopCertData.contacts_card_electronic_2)">
						<image :src="$util.img(shopCertData.contacts_card_electronic_2)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="audit-item">
					<text>法人身份证反面</text>
					<view class="img-wrap" @click="previewImg(shopCertData.contacts_card_electronic_3)">
						<image :src="$util.img(shopCertData.contacts_card_electronic_3)" mode="aspectFit"></image>
					</view>
				</view>

			</view>

			<view class="audit-wrap" v-if="shopCertData.cert_type == 1">
				<text class="audit-title">个人信息</text>
				<view class="audit-item">
					<text>联系人姓名</text>
					<text>{{shopCertData.contacts_name}}</text>
				</view>
				<view class="audit-item">
					<text>联系人手机</text>
					<text>{{shopCertData.contacts_mobile}}</text>
				</view>
				<view class="audit-item">
					<text>联系人身份证</text>
					<text>{{shopCertData.contacts_card_no}}</text>
				</view>
				<view class="audit-item">
					<text>身份证正面</text>
					<view class="img-wrap" @click="previewImg(shopCertData.contacts_card_electronic_2)">
						<image :src="$util.img(shopCertData.contacts_card_electronic_2)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="audit-item">
					<text>身份证反面</text>
					<view class="img-wrap" @click="previewImg(shopCertData.contacts_card_electronic_3)">
						<image :src="$util.img(shopCertData.contacts_card_electronic_3)" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<view class="audit-wrap">
				<text class="audit-title">银行信息</text>
				<view class="audit-item" v-if="shopCertData.bank_account_type == 3">
					<text>开户许可证</text>
					<view class="img-wrap" @click="previewImg(shopCertData.bank_account_number_electronic)">
						<image :src="$util.img(shopCertData.bank_account_number_electronic)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="audit-item" v-if="shopCertData.bank_account_type == 2">
					<text>结算授权函</text>
					<view class="img-wrap" @click="previewImg(shopCertData.bank_letter_ofauth_pic)">
						<image :src="$util.img(shopCertData.bank_letter_ofauth_pic)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="audit-item" v-if="shopCertData.bank_account_type == 2">
					<text>结算人身份证正面</text>
					<view class="img-wrap" @click="previewImg(shopCertData.bank_card_electronic_2)">
						<image :src="$util.img(shopCertData.bank_card_electronic_2)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="audit-item">
					<text>结算人身份证反面</text>
					<view class="img-wrap" @click="previewImg(shopCertData.bank_card_electronic_3)">
						<image :src="$util.img(shopCertData.bank_card_electronic_3)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="audit-item">
					<text>银行开户名</text>
					<text>{{shopCertData.bank_account_name}}</text>
				</view>
				<view class="audit-item" v-if="shopCertData.bank_account_type == 1">
					<text>银行开户证件号</text>
					<text>{{shopCertData.bank_account_card}}</text>
				</view>
				<view class="audit-item">
					<text>开户银行账号</text>
					<text>{{shopCertData.bank_account_number}}</text>
				</view>
				<view class="audit-item">
					<text>开户银行支行名称</text>
					<text>{{shopCertData.bank_name}}</text>
				</view>
				<view class="audit-item">
					<text>支行联行号</text>
					<text>{{shopCertData.bank_code}}</text>
				</view>


			</view>

			<view class="audit-wrap">
				<text class="audit-title">店铺信息</text>
				<view class="audit-item">
					<text>店铺名称</text>
					<text>{{shopCertData.store_name}}</text>
				</view>
				<view class="audit-item">
					<text>客服电话</text>
					<text>{{shopCertData.store_tel}}</text>
				</view>
				<view class="audit-item">
					<text>门头照片</text>
					<view class="img-wrap" @click="previewImg(shopCertData.store_banner)">
						<image :src="$util.img(shopCertData.store_banner)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="audit-item">
					<text>店内照片</text>
					<view class="img-wrap" @click="previewImg(shopCertData.store_photo)">
						<image :src="$util.img(shopCertData.store_photo)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="audit-item">
					<text>特殊资质</text>
					<view class="img-wrap" @click="previewImg(shopCertData.store_type_pic)">
						<image :src="$util.img(shopCertData.store_type_pic)" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<!-- <view class="audit-wrap" v-if="procedure==3 || procedure==7">
				<text class="audit-title">支付凭证信息</text>
				<view class="audit-item">
					<text>付款凭证</text>
					<view class="img-wrap" @click="previewImg(shopCertData.paying_money_certificate)">
						<image :src="$util.img(shopCertData.paying_money_certificate)" mode="aspectFit"></image>
					</view>
				</view>
				<view class="audit-item" v-if="shopCertData.paying_money_certificate_explain">
					<text>付款凭证说明</text>
					<text>{{shopCertData.paying_money_certificate_explain}}</text>
				</view>
			</view> -->

			<button class="audit-btn color-base-bg" type="default" v-if="auditInfo['procedure_'+procedure].btn"
				@click="linkSkip">{{auditInfo['procedure_'+procedure].btn}}</button>
		</block>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				auditInfo: {
					procedure_2: {
						title: '待审核认证信息',
						text: '认证信息审核中，请稍等 ~'
					},
					procedure_3: {
						title: '待审核实名信息',
						text: '实名信息审核中，请稍等 ~'
					},
					procedure_4: {
						title: '认证失败',
						text: '认证信息审核失败，',
						error: '查看原因',
						btn: '重新填写'
					},
					procedure_5: {
						title: '认证通过',
						text: '恭喜您认证成功，快点击进入开启线下收款体验吧！',
						btn: '进入收银台'
					},
					procedure_6: {
						title: '实名失败',
						text: '实名信息审核失败，',
						error: '查看原因',
						btn: '重新提交'
					}
				},
				procedure: '',
				shopCertData: '',
				applyMessage: '', //认证失败错误提示
				uid: '',
				member_id: '',
				cityName: '' //城市分站
			};
		},
		onLoad(option) {
			if (!uni.getStorageSync('shop_token')) {
				this.$util.redirectTo('/pages/login/login', {
					back: '/pages/login/cert'
				}, 'redirectTo');
				return false;
			}
		},
		async onShow() {
			this.getColseType();
		},
		mounted() {
			if (this.$refs.loadingCover)
				this.$refs.loadingCover.hide();
		},
		methods: {
			getColseType() {
				this.$api.sendRequest({
					url: '/shopapi/apply/certInfo',
					success: res => {
						if (res.code == 0 && res.data) {
							this.shopCertData = res.data.shop_cert_info;
							this.procedure = res.data.procedure;
							if (res.data.shop_cert_info) this.applyMessage = res.data.shop_cert_info
								.apply_message;
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						}
					}
				});
			},
			getApplyMessage() {
				uni.showModal({
					title: '认证失败原因',
					content: this.applyMessage,
					showCancel: false
				});
			},
			toOpenInfo() {
				this.$util.redirectTo('/pages/apply/openinfo');
			},
			linkSkip() {
				//默认一个套餐快速到店铺信息页
				let obj = {};
				obj.group_id = this.shopCertData.group_id;
				obj.group_name = this.shopCertData.group_name;
				uni.setStorage({
					key: 'shopPackage',
					data: JSON.stringify(obj)
				});
				if (this.procedure == 4 || this.procedure == 7) {
					this.$util.redirectTo('/pages/apply/openinfo');
				} else if (this.procedure == 6) {
					this.$util.redirectTo('/pages/apply/payinfo');
				} else if (this.procedure == 5) {
					this.goShop();
				}
			},
			goShop() {
				this.$util.redirectTo('/pages/property/collection/index', {}, 'redirectTo');
			},
			previewImg(pic_path) {
				let paths = [this.$util.img(pic_path)];
				uni.previewImage({
					current: 0,
					urls: paths
				});
			}
		}
	};
</script>

<style lang="scss">
	.audit-inner {
		overflow: hidden;
		padding-bottom: 170rpx;

		.audit-status {
			margin-top: 20rpx;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #fff;

			.realname-tit {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
			}

			.qrcode {
				margin: 15rpx auto;
				width: 200rpx;
				height: 200rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.color-warn {
				color: red;
			}
		}

		.audit-wrap {
			overflow: hidden;

			.audit-title {
				display: block;
				margin-top: 20rpx;
				margin-left: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: $color-sub;
			}

			.audit-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				min-height: 100rpx;
				background-color: #fff;
				border-bottom: 2rpx solid $color-line;

				&:last-of-type {
					border-bottom: none;
				}

				text:last-of-type {
					overflow: hidden;
					max-width: 450rpx;
				}
			}

			.img-wrap {
				margin: 20rpx 0;
				width: 300rpx;
				height: 140rpx;
				border: 2rpx dashed $color-line;

				image {
					width: 300rpx;
					height: 140rpx;
				}
			}

		}

		.audit-btn {
			position: fixed;
			left: 25px;
			right: 25px;
			bottom: 25px;
			display: block;
			color: #fff;
			z-index: 5;
			border: none;
		}
	}
</style>